<template>
  <div class="view-toggler">
    <el-radio-group v-model="viewValue" size="default" @change="handleChange">
      <el-radio-button label="list">列表视图</el-radio-button>
      <el-radio-button label="timeline">时间表视图</el-radio-button>
    </el-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: 'list',
  },
})

const emit = defineEmits(['update:modelValue'])

const viewValue = ref(props.modelValue)

watch(
  () => props.modelValue,
  (val) => {
    viewValue.value = val
  }
)

const handleChange = (val: string) => {
  emit('update:modelValue', val)
}
</script>

<style scoped>
.view-toggler {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
</style>
